﻿<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>登录注册Tab切换小部件</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link href="myCss/LoginStyle4.css" rel="stylesheet" />
    <script src="myJs/jquery.min.js"></script>
    <script src="myJs/easyResponsiveTabs.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#horizontalTab').easyResponsiveTabs({
                type: 'default',
                width: 'auto',
                fit: true
            });
        });
    </script>
</head>
<body>
    <div class="main-info">

        <div class="sap_tabs">

            <div id="horizontalTab" style="display: block; width: 100%; margin: 0px;">

                <ul class="resp-tabs-list">
                    <li class="resp-tab-item" aria-controls="tab_item-0" role="tab"><h2><span>登录</span></h2></li>
                    <li class="resp-tab-item" aria-controls="tab_item-1" role="tab"><span>注册</span></li>
                    <div class="clear"> </div>
                </ul>

                <div class="resp-tabs-container">

                    <div class="tab-1 resp-tab-content" aria-labelledby="tab_item-0">
                        <div class="login-top">
                            <form>
                                <input type="text" class="email" placeholder="邮箱" required="" />
                                <input type="password" class="password" placeholder="密码" required="" />
                                <input type="checkbox" id="brand" value="">
                                <label for="brand"><span></span> 还记得我吗？</label>
                            </form>
                            <div class="login-bottom">
                                <ul>
                                    <li>
                                        <a href="#">忘记密码了吗？</a>
                                    </li>
                                    <li>
                                        <form>
                                            <input type="submit" value="登录" />
                                        </form>
                                    </li>
                                    <ul>
                                        <div class="clear"></div>
                            </div>
                        </div>
                    </div>

                    <div class="tab-1 resp-tab-content" aria-labelledby="tab_item-1">
                        <div class="login-top sign-top">
                            <form>
                                <input type="text" class="name active" placeholder="用户名" required="" />
                                <input type="text" class="email" placeholder="邮箱" required="" />
                                <input type="password" class="password" placeholder="密码" required="" />
                                <input type="checkbox" id="brand1" value="">
                                <label for="brand1"><span></span> 还记得我吗？</label>
                            </form>
                            <div class="login-bottom">
                                <ul>
                                    <li>
                                        <a href="#">忘记密码了吗？</a>
                                    </li>
                                    <li>
                                        <form>
                                            <input type="submit" value="注册" />
                                        </form>
                                    </li>
                                    <ul>
                                        <div class="clear"></div>
                            </div>
                        </div>
                    </div>

                </div>

            </div>

        </div>

        <div class="social-icons">
            <ul>
                <li><a href="#"><span class="icons"></span><span class="text">Facebook</span></a></li>
                <li class="twt"><a href="#"><span class="icons"></span><span class="text">Twitter</span></a></li>
                <li class="ggp"><a href="#"><span class="icons"></span><span class="text">Google+</span></a></li>
                <li class="pin"><a href="#"><span class="icons"></span><span class="text">Pinterest</span></a></li>
                <div class="clear"> </div>
            </ul>
        </div>

    </div>
</body>
</html>